{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.css' %} ">
    <script src="{% static 'js/jquery3.6.js' %}"></script>

       <style>
        .box {
            width: 450px;
            border: 1px solid #f0f0f0;
            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;

            padding-left: 40px;
            padding-right: 40px;
            padding-bottom: 30px;

            box-shadow: 5px 10px 10px rgb(0 0 0 / 5%);
        }
        {#错误提示的样式 #}
        .error-message {
            color: red;
            position: absolute;
        }
    </style>
</head>
<body>
<div class="box" >
    <form method="post" id="f1">
        <h2 style="text-align: center;">短信登录</h2>
        {# Django 要求我们加入一个 csrfmiddlewaretoken（会产生一个隐藏input标签,产生的值由中间件验证） 产生的值是随机的且不能改 不写会报错 #}
        {% csrf_token %}
        {#循环的时候需要区分不同情况，短信验证码与普通字段不同        #}
         {% for field in form %}
            {#field.name是字段名  #}
            {% if field.name == 'code' %}
                <div class="form-group" style="position: relative;margin-bottom: 25px">
                    <label>{{ field.label }}</label>
                    <div class="row">
                        <div class="col-xs-7">
                            {{ field }}
                            <span class="error-message">{{ field.errors.0 }}</span>
                        </div>
                        <div class="col-xs-5">
                            <input id="sendBtn" type="button" value="获取验证码" class="btn btn-default"/>
                        </div>
                    </div>

                </div>
            {% else %}
                <div class="form-group" style="position: relative;margin-bottom: 25px">
                    <label>{{ field.label }}</label>
                    {{ field }}
                    <span class="error-message">{{ field.errors.0 }}</span>
                </div>
            {% endif %}
        {% endfor %}
        <button type="button" class="btn btn-primary" id="loginBtn">登 录</button>
        {#  跳转回账户密码登录界面 name反向生成     #}
        <a href="{% url 'login' %}" style="float: right;">用户名登录</a>
         {#  登录结果异常          #}
        <span style="color: coral">{{ error }}</span>

    </form>
</div>

{# 引入ajax请求的JS代码 解决发请求需要携带 X-CSRFTOKEN 问题  #}
<script src="{% static 'js/csrf.js' %}"></script>
<script>
    var $smsBtn = $("#sendBtn")
    // 当页面框架加载完成之后，自动执行里面的代码。
   $(function () {
        bindSendSmsEvent();
        bindLoginEvent()
    })


   function bindSendSmsEvent(){
       $smsBtn.click(function (){
           // 手机号 form自动产生的标签id= id_变量名 ；账户类型
           var mobiles = $("#id_mobile").val()
           var roles = $("#id_role").val()
           // 清除所有错误文本内容
           $(".error-message").empty();

           $.ajax({
                url: "{% url 'sms_send' %}", //提交地址
                type:"POST", //请求类型
                data:{
                    mobile:mobiles,
                    role:roles
                }, // 手机号数据
                {#X-CSRFTOKEN Jango会自动添加一个HTTP_ 所以获取请求头为 HTTP_X-CSRFTOKEN#}
               dataType: "JSON", //把返回的数据转json格式
                // 请求返回结果 界面不会跳转，会在WEB打印控制台显示返回结果
                success:function(res){
                    console.log(res);
                    // 取json字段status 如果发短信成功
                    if(res.status){
                        //2 动态计时
                        sendSmsRemind()
                    }else {
                        // 如果发短信失败 循环获取键值对 {"mobile ":[],"":[]} 把异常拿出来显示
                        $.each(res.detail,function (k,v){
                                // 找到手机号的标签的下一个兄弟，修改文本值
                                $("#id_" + k).next().text(v[0]);
                                console.log(res);})
                    }

                }
            })
       })
   }
    // 点击登录按钮进行登录
    function bindLoginEvent(){
        // 清除所有错误文本内容
        $("#loginBtn").click(function (){
            $(".error-message").empty();
            $.ajax({
            url:"{% url 'sms_login' %}",
            type:"POST",
            data:$("#f1").serialize(),  //使用form表单的id获取所有的值并提交包含csrf
            dataType: "JSON",
            success:function(res){
                console.log(res)
                if(res.status){
                    // 登录成功 跳转到什么网站
                    location.href=res.data
                }else {
                // 添加失败的错误信息 代码同验证码
                 $.each(res.detail,function (k,v){
                                // 找到手机号的标签的下一个兄弟，修改文本值
                                $("#id_" + k).next().text(v[0]);
                                console.log(res);})
                }
            }
})
        })
    }

    /*
    * 短信倒计时函数
    * */
    function sendSmsRemind(){
        // 读秒效果
       // 绑定点击事件
       // bootstrap的按键只读 写disabled属性
       $smsBtn.prop("disabled",true)
       //定时器 改秒数
       var time = 60;
       var remind = setInterval(function () {
           $smsBtn.val(time+"s重新发送");
           time-=1;
           // 时间等于0
           if(time <= -2){
               // clearInterval(id) 停止定时器
                window.clearInterval(remind);
                // 改回默认文本 且把按键变成可以点击
                $smsBtn.val("点击获取验证码");
                $smsBtn.prop("disabled", false);
           }
       },1000)
   }

</script>
</body>
</html>